<template>
  <view class="app-container">
    <view class="top-content"></view>
    <view class="top">
      <view class="content-box">
        <!-- <u-field
        label-width="160"
        label-align="left"
        v-model="data.recoveredName"
        label="状态"
        disabled
        :border-bottom="false"
      >
      </u-field> -->
        <!-- <u-field
        label-width="160"
        label-align="left"
        v-model="data.severityString"
        label="报警等级"
        disabled
        :border-bottom="false"
      >
      </u-field> -->
        <u-field
          label-width="160"
          label-align="left"
          v-model="data.projectName"
          label="所属项目"
          disabled
          :border-bottom="false"
        >
        </u-field>

        <!-- <u-field
        label-width="160"
        label-align="left"
        v-model="data.details[0].deviceName"
        label="产品"
        disabled
        :border-bottom="false"
      >
      </u-field> -->
        <u-field
          label-width="160"
          label-align="left"
          v-model="data.ruleName"
          label="规则名称"
          disabled
          :border-bottom="false"
        >
        </u-field>
        <u-field
          label-width="160"
          label-align="left"
          v-model="data.start"
          label="发生时间"
          disabled
          :border-bottom="false"
        >
        </u-field>
        <u-field
          label-width="160"
          label-align="left"
          v-model="data.recoveredName"
          label="是否恢复"
          disabled
          :border-bottom="false"
        >
        </u-field>
        <u-field
          label-width="160"
          label-align="left"
          v-if="data.recovered"
          v-model="data.end"
          label="恢复时间"
          disabled
          :border-bottom="false"
        >
        </u-field>
        <u-field
          label-width="160"
          label-align="left"
          v-model="data.handledName"
          label="是否处理"
          disabled
          :border-bottom="false"
        >
        </u-field>
        <u-field
          label-width="160"
          label-align="left"
          v-if="data.handledBy"
          v-model="data.handledBy"
          label="处理人员"
          disabled
          :border-bottom="false"
        >
        </u-field>
        <u-field
          label-width="160"
          label-align="left"
          v-if="data.handledAt"
          v-model="data.handledAt"
          label="处理时间"
          disabled
          :border-bottom="false"
        >
        </u-field>
        <u-field
          label-width="160"
          label-align="left"
          v-model="text"
          label="状况"
          disabled
          :border-bottom="false"
        >
        </u-field>
        <view class="box-son">
          <view
            v-for="(item,index) of data.details"
            :key="index"
            class="son-card"
          >
            <view>
              <span class="card-title">产品名称</span>
              <span class="card-value">{{item.deviceName}}</span>
            </view>
            <view>
              <span class="card-title">产品代码</span>
              <span class="card-value aralm">{{item.deviceCode}}</span>
            </view>
            <view>
              <span class="card-title">时间</span>
              <span class="card-value">{{ item.start | capitalize}}</span>
            </view>
            <view>
              <span class="card-title">地点</span>
              <span class="card-value">{{item.address ? item.address : "未配置" }}</span>
            </view>
            <view v-if="
                item.condition
                  ? item.condition.triggerSource == 0
                    ? true
                    : false
                  : false
              ">
              <span class="card-title">状况</span>
              <span class="card-value aralm"> {{
                  item.condition.telemetry.name +
                  "(" +
                  item.condition.telemetry.userIdentifier +
                  ")=" +
                  item.value
                }}</span>
            </view>
            <view v-if="
                item.condition
                  ? item.condition.triggerSource == 0
                    ? true
                    : false
                  : false
              ">
              <span class="card-title">触发条件</span>
              <span class="card-value"> {{
                item.condition.telemetry.name +
                "(" +
                item.condition.telemetry.userIdentifier +
                ")" +
                item.condition.comparisonOperatorString +
                item.condition.threshold
              }}</span>
            </view>
            <view v-if="
                item.condition
                  ? item.condition.triggerSource == 1
                    ? true
                    : false
                  : false
              ">
              <span class="card-title">触发原因</span>
              <span class="card-value aralm">>{{ item.condition.event.name }}</span>
            </view>
          </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      text: "",
      data: {}
    };
  },
  filters: {
    capitalize: function(val) {
      if (val) {
        let arr = val.split("T");
        if (arr[1] && arr[0]) {
          let array = arr[1].split(".");
          if (array[0]) {
            return arr[0] + " " + array[0];
          }
        }
      }
    },
    fixed: function(val) {
      return Number(val).toFixed(2);
    }
  },
  onLoad(option) {
    let data = JSON.parse(option.data);
    if (data.recovered) {
      data.recoveredName = "已恢复";
    } else {
      data.recoveredName = "未恢复";
    }
    if (data.handled) {
      data.handledName = "已处理";
    } else {
      data.handledName = "未处理";
    }
    this.data = data;
  },
  methods: {}
};
</script>
<style lang="scss" scoped>
.app-container {
  height: 100%;
  position: relative;
  background-color: white;
  //   overflow: hidden;
  //   background-color: #f3f4f6;
}
.content-box {
  padding: 20rpx;
}
.top {
  height: calc(100% - 200rpx);
  position: absolute;
  background-color: white;
  padding: 30rpx;
  width: 100%;
  top: 50rpx;
  border-radius: 40rpx 40rpx 0 0;
  .card {
    // background-color: white;
    border: 1px solid #eee;
    padding: 20rpx 20rpx;
    border-radius: 25rpx;
    box-shadow: 0 0 20rpx #eee;
    margin-bottom: 20rpx;
  }
}
.top-content {
  height: 160upx;
  background: linear-gradient(to left, #1040be, #026dff);
}
/deep/ .u-label-text {
//   font-weight: bolder;
  font-size: 14px;
  color: #606266;
}
/deep/ .u-field {
  padding: 10rpx;
}
.box-son {
  width: 100%;
  margin-top: -60rpx;
  margin-left: 130rpx;
  display: flex;
  flex-direction: column;
  //   justify-content: center;
  //   align-items: center;
  .son-card {
    width: 80%;
    padding: 10rpx;
    border: 1px solid #ddd;
    margin-top: 20rpx;
    .card-title {
      width: 100rpx;
      font-size: 12px;
      margin-right: 10rpx;
      display: inline-block;
      color: #606266;
    }
    .card-value {
      font-size: 12px;
      color: #202124;
    }
  }
}
.aralm {
  color: red !important;
}
</style>